<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>window对象 - JavaScript</title>
</head>
<body>
    <h1>window对象</h1>
    <h4>学习目标</h4>
    <ol>
        <li>了解浏览器顶层对象设计</li>
        <li>熟悉window对象常用的方法和属性</li>
    </ol>

    <div style="height: 50px;"></div>

    <div style="text-align: center; display: none;">
        <p>浏览器对象模型</p>
        <img src="image/BOM.jpg" alt="浏览器对象模型" />
    </div>

    <script type="text/javascript">
        // --------------------------------------------------------------------
        // -- 浏览器对象模型
        // --------------------------------------------------------------------
        /*
            BOM：Browser Object Model 是浏览器对象模型，BOM由多个对象构成
        */

        // --------------------------------------------------------------------
        // -- 1. window对象
        // --------------------------------------------------------------------
        /*
            其中代表浏览器窗口的window对象是BOM的顶层对象也是核心对象，其他对象都是该对象的子对象。

            所有浏览器都支持 window 对象。它表示浏览器窗口。
            所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
            全局变量是 window 对象的属性。
            全局函数是 window 对象的方法。

            常用方法:
                window.alert() 弹窗提示
                window.prompt() 提示输入
                window.confirm() 提示确认
                window.open() 打开窗口
                window.close() 关闭窗口
                window.setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式
                window.clearInterval() 取消由 setInterval() 设置的 timeout。
                window.setTimeout() 在指定的毫秒数后调用函数或计算表达式。
                window.clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
                window.print() 打印当前窗口的内容。

             常用属性:
                window.name 窗口名称
                window.screenX, window.screenY 浏览器距离屏幕的距离
                window.outerHeight 属性设置或返回一个窗口的外部高度，包括所有界面元素（如工具栏/滚动条）。
                window.outerWidth 属性设置或返回窗口的外部宽度，包括所有的界面元素（如工具栏/滚动条）。
                window.innerHeight 返回窗口的文档显示区的高度。
                window.innerWidth 返回窗口的文档显示区的宽度。
        */
        // 1.1 打印window这个对象，查看这个对象
        // 1.2 分别用var和let声明两个变量，然后使用window.变量名打印试试看，同时观察window对象
        // 1.3 声明一个函数，然后使用window.函数名调用看看，同时观察window对象
        // 1.4 alert、prompt、confirm的调用可以去掉window吗？
        // 1.5 使用open方法打开一个新的页面
        // 1.6 设置一个按钮, 当点击这个按钮的时候, 询问是否关闭页面, 如果确认则关闭当期页面
        // 1.7 查看浏览器距离屏幕的距离
        // 1.8 查看页面的内部宽度和高度
        // 1.9 查看页面的外部宽度和高度
        // 1.10 setTimeout 和setInterval有什么区别？
        // 1.11 使用打印机打印本页面的内容



        // ----------------------------------------------------
        // -- 练习
        // ----------------------------------------------------
        // 1. 学习查看到MDN手册，写出相关地址
        //      查询html首页
        //      查询css首页
        //      查询js window对象页面
        //      查询js document对象页面
        // 2. 学习查看菜鸟网站手册，写出相关地址
        //  查询css3页面
        //  查询windows对象页面
        //  查询screen对象页面
        // 3. 判断用户浏览器是否是全屏？


    </script>
</body>
</html>